<template>
	<view>
		<view class="form_split_10"></view>
		<view class="notice_bar">举报{{typeCn}}：{{type===1?jobname:fullname}}
			<view class="right_txt" @click="handleSeeCon">查看{{typeCn}}</view>
		</view>
		<view class="form_split_10"></view>
		<view class="feed_container">
			<view class="feed_title">举报原因</view>
			<view class="feed_type clearfix">
				<view class="type_item" :class="item.id == reason ? 'selected' : ''"
					v-for="(item, index) in options_tipoff" :key="index" @click="handlerReason(item)">{{ item.text }}
				</view>
				<view class="clear"></view>
			</view>
			<view class="feed_title">备注说明(必填)</view>
			<textarea 
			maxlength="-1" 
			:value="content"
			class="feed_area"  
			@input="handleInput"
			:rows="3"
			placeholder="请简要描述您的问题，以便我们尽快核实解决">
			</textarea>
			<view class="feed_title">上传凭证</view>
			<view class="up_text">请提供明确指向举报原因的证据，如聊天截图、门店招 牌等信息</view>
			<view class="feed_up clearfix">
				<view class="img_item" v-for="(item, index) in imgList" :key="index">
					<image :src="item.img_src" alt="item.title" class="img" @click="previewImg(index)" ></image>
					<view class="delete_ico" @click="deleteImg(index)"></view>
				</view>
				<view class="img_item" v-if="imgList.length < 6">
					<u-upload
						:max-size="fileupload_size * 1024 *1024"
						:limitType ="['png', 'jpg', 'jpeg', 'bmp', 'gif']"
						:show-progress="false" 
						:deletable="false" 
						:show-upload-list="false" 
						:custom-btn="true" 
						:action="uploadUrl"
						:multiple="false"
						:header="{'Content-Type': 'multipart/form-data', 'user-token': userToken, platform: platform}"
						@on-change="successImg"
						@on-error="errorImg"
						@on-choose-complete="onChooseComplete"
						@on-oversize="handleOversize"
						>
						<view slot="addBtn" class="img_item for_upload">添加图片</view>
					</u-upload>
				</view>
			</view>
			<view style="margin: 16px 16px 16px;">
				<u-button shape="circle" type="primary" @click="handleSubmit">提交</u-button>
			</view>
		</view>
		
		<u-mask :show="uploading">
			<view class="uploading_wrapper">
				<view class="upload_con">
					<u-loading mode="flower" size="60rpx"></u-loading>
					<view class="upload_text">正在上传...</view>
				</view>
			</view>
		</u-mask>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import http from '@/utils/http'
	import api from '@/api'
	import {mapState} from 'vuex'
	// import Vue from 'vue'
	// import {
	// 	ImagePreview
	// } from 'vant'
	// Vue.use(ImagePreview)
	export default {
		name: 'Tipoff',
		props: ['type', 'jobname', 'fullname', 'target_id'],
		data() {
			return {
				uploadUrl:getApp().globalData.baseURL + api.uploadFile,
				uploading: false,
				typeCn: '',
				reason: 0,
				content: '',
				content2: '',
				imgList: [],
				previewImgList: []
			}
		},
		computed: {
			...mapState({
				userToken:state=>state.userToken,
				platform:state=>state.platform,
				fileupload_size: state => state.config.fileupload_size / 1024
			}),
			options_tipoff() {
				if (this.type === 1) {
					return this.$store.state.classifyTipoffJob
				} else {
					return this.$store.state.classifyTipoffResume
				}
			}
		},
		mounted() {
			if(this.jobname || this.target_id || this.fullname){
				this.initCB()
			}
		},
		methods: {
			handleOversize(){
				uni.showToast({
					title: "图片最大不能超过"+this.fileupload_size+"M",
					icon: 'none'
				})
			},
			// 作品上传
			successImg(data, index, lists, name) {
				if(data.statusCode != 200) return false
				let res = JSON.parse(data.data)
				if (parseInt(res.code) === 200) {
					this.uploading = false
					this.$refs.uTips.show({
						title: res.message,
						type: 'success'
					})
					this.imgList.push({
						audit: res.data.audit,
						audit_text: res.data.audit_text,
						id: res.data.id,
						img: res.data.file_id,
						img_src: res.data.file_url
					})
					this.setPreviewImgList()
				} else {
					this.uploading = false
					this.$refs.uTips.show({
						title: res.message,
						type: 'error'
					})
				}
			},
			errorImg(res, index, lists, name){
				this.uploading = false
			},
			onChooseComplete(lists,name){
				if(lists.length>0){
					this.uploading = true
				} 
			},
			initCB() {
				if (this.type === 1) {
					this.typeCn = '职位'
				} else {
					this.typeCn = '简历'
				}
				uni.setNavigationBarTitle({
				　　title:'举报' + this.typeCn
				})
				this.content = ''
				if (this.type === 1) {
					this.$store.dispatch('getClassify', 'tipoffJob').then(res => {
						this.reason = res.data[0].id
					})
				} else {
					this.$store.dispatch('getClassify', 'tipoffResume').then(res => {
						this.reason = res.data[0].id
					})
				}
				this.imgList = []
				this.previewImgList = []
			},
			handlerReason(item) {
				this.reason = item.id
			},
			handleInput(e){
				this.content2 = e.detail.value
			},
			// 提交
			handleSubmit() {
				this.content = this.content2
				if (this.reason == 0) {
					this.$refs.uTips.show({
						title: '请选择举报原因',
						type: 'error'
					})
					return false
				}
				if (this.content == '') {
					this.$refs.uTips.show({
						title: '请填写备注说明',
						type: 'error'
					})
					return false
				}
				if (this.content.length > 200) {
					this.$refs.uTips.show({
						title: '最多填写200个字',
						type: 'error'
					})
					return false
				}
				let imgArr = []
				this.imgList.forEach(element => {
					imgArr.push(element.img)
				})
				http
					.post(api.tipoff, {
						target_id: this.target_id,
						type: this.type,
						reason: this.reason,
						content: this.content,
						img: imgArr
					})
					.then(res => {
						this.$refs.uTips.show({
							title: res.data.message,
							type: 'success'
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
							this.content = ''
							this.content2 = ''
						},2000)
					})
					.catch(() => {})
			},
			deleteImg(index) {
				this.imgList.splice(index, 1)
				this.setPreviewImgList()
			},
			// 预览作品
			previewImg(index) {
				uni.previewImage({
					urls: this.previewImgList,
					indicator: 'number',
					current: index
				})
			},
			// 更新预览图片
			setPreviewImgList() {
				this.previewImgList = this.imgList.map(function(item) {
					return item.img_src
				})
			},
			// 查看简历/职位
			handleSeeCon(){
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
				},1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uploading_wrapper{
		display: flex;
		width: 100%;
		height: 100%;
		align-items: center;
		justify-content: center;
		.upload_con{
			text-align:center;
			.upload_text{
				color: #fff;
			}
		}
	}
	.feed_container {
		.feed_up {
			padding: 20rpx 0;

			.img_item {
				&.for_upload {
					margin: 0;
					padding-top: 132rpx;
					text-align: center;
					font-size: 28rpx;
					color: #c0c0c0;
					background-image:url(../../static/img/upload_add_ico.png);
					background-color:#f8f8f8;
					background-position: center 40rpx;
					 background-repeat: no-repeat;
					background-size: 64rpx;
				}

				.delete_ico {
					&::before {
						position: absolute;
						left: 10rpx;
						top: 19rpx;
						width: 20rpx;
						border-top: 2rpx solid #ffffff;
						content: " ";
						transform: rotate(45deg);
					}

					&::after {
						position: absolute;
						left: 19rpx;
						top: 10rpx;
						height: 20rpx;
						border-right: 2rpx solid #ffffff;
						content: " ";
						transform: rotate(45deg);
					}

					position: absolute;
					right: -12rpx;
					top: -12rpx;
					width: 40rpx;
					height: 40rpx;
					border-radius: 100%;
					z-index: 2;
					background-color: rgba(0, 0, 0, 0.5);
				}

				image{
					width: 200rpx;
					height: 200rpx;
					border-radius: 8rpx;
					border: 0;
				}

				&:nth-of-type(3n) {
					margin-right: 0;
				}

				float: left;
				position: relative;
				width: 200rpx;
				height: 200rpx;
				border-radius: 8rpx;
				margin: 0 40rpx 40rpx 0;
			}
		}

		.feed_area {
			&::placeholder {
				color: #c9c9c9;
			}

			width: 92%;
			border: 2rpx solid #e2e2e2;
			resize: none;
			padding: 16rpx 24rpx;
			font-size: 28rpx;
			line-height: 1.6;
		}

		.up_text {
			font-size: 28rpx;
			color: #c9c9c9;
			line-height: 1.6;
			word-break: break-all;
		}

		.feed_type {
			.type_item {
				&.selected {
					background-color: #f4f9ff;
					border: 2rpx solid #f4f9ff;
					color: #1787fb;
				}

				float: left;
				margin-right: 20rpx;
				padding: 10rpx 24rpx;
				font-size: 22rpx;
				color: #666666;
				background-color: #ffffff;
				border: 2rpx solid #e2e2e2;
				margin-bottom:20rpx;
			}
		}

		.feed_title {
			padding: 34rpx 0;
			font-size: 32rpx;
			color: #333333;
			font-weight: bold;
		}

		padding: 0 32rpx;
	}

	.notice_bar {
		width: 100%;
		font-size: 24rpx;
		color: #ff6600;
		position: relative;
		padding: 22rpx 0 22rpx 66rpx;
		background:$remind_ico;
		background-color:#fffbeb ;
		background-repeat: no-repeat;
		background-position:26rpx center ;
		background-size: 30rpx;

		.right_txt {
			position: absolute;
			right: 0;
			top: 50%;
			transform: translate(0, -50%);
			font-size: 24rpx;
			color: #1787fb;
			padding: 26rpx 34rpx;
			z-index: 50;
		}
	}

	.u-overlay {
		text-align: center;
		z-index: 2;
	}

	.u-loading {
		top: 36%;
	}

	.u-loading__text {
		color: #c3c3c3;
	}
</style>
